<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #smallImg {
      width: 300px;
      height: 300px;
      background-image: url(./img/lou.jpg);
      background-size: cover;
    }

    #smallDiv {
      width: 100px;
      height: 100px;
      background-color: rgba(255, 0, 0, .2);
      display: none;
      position: absolute;
    }

    #bigDiv {
      width: 300px;
      height: 300px;
      /* border: 1px solid red; */
      position: absolute;
      left: 300px;
      top: 0px;
      overflow: hidden;
      display: none;
    }

    #bigImg {
      width: 900px;
      height: 900px;
      position: absolute;
    }
  </style>
</head>

<body>

  <div class="fang">
    <div id="smallImg">
      <div id="smallDiv"></div>
    </div>

    <div id="bigDiv">
      <img src="./img/lou.jpg" id="bigImg">
    </div>
  </div>


  <script>
    // 逻辑：
    // 1.鼠标移入，出现小div（遮挡层）和大div（展示效果区域）
    // 鼠标移出，隐藏小div、大div

    let smallImg = document.getElementById("smallImg");
    let smallDiv = document.getElementById("smallDiv");
    let bigDiv = document.getElementById("bigDiv");
    let bigImg = document.getElementById("bigImg");

    smallImg.onmouseover = function () {
      smallDiv.style.display = 'block';
      bigDiv.style.display = 'block';
    }
    smallImg.onmouseout = function () {
      smallDiv.style.display = 'none';
      bigDiv.style.display = 'none';
    }

    // 2.小div移动方向和大图移动方向是相反的
    // 2.1 先完成鼠标绑定遮挡层 
    // 鼠标移动距离大于 遮挡层的移动距离 
    // 2.2 把小div和大图移动 OK

    // 3.核心：整个放大镜功能存在一个比例
    //    小div/小图 = 大div/大图
    //    100 / 300  = 300 / 900
    // 分析：尺寸大小——>结论：3倍——>才是移动的距离

    smallImg.onmousemove = function (e) {
      var e = e || window.event;
      // console.log(e.clientX,e.clientY);
      var x = e.clientX - 50;
      var y = e.clientY - 50;
      // 对移动范围进行判断
      if (x >= 200) {
        x = 200;
      }
      if (x <= 0) {
        x = 0;
      }
      if (y >= 200) {
        y = 200;
      }
      if (y <= 0) {
        y = 0;
      }

      // 小div移动距离
      smallDiv.style.left = x + 'px';
      smallDiv.style.top = y + 'px';

      // 大图移动距离
      bigImg.style.left = -3 * x + 'px';
      bigImg.style.top = -3 * y + 'px';
    }
  </script>

</body>

</html>